<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      a {
        text-decoration: none;
        color: black;
      }
      /* router-link的激活样式 */
      /* .router-link-active {
        color: red;
        font-size: 30px;
      } */
      .active {
        color: red;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>路由使用</h1>

      <!-- 导航部分 -->
      <!-- vue-router 的视口 路由的切换位置 -->
      <router-view></router-view>
      <div class="nav">
        <!-- router-link vue跳转组件 渲染后是一个a标签 -->
        <!-- to="/path地址" 跳转路径的设置 to="name名称"  -->
        <!-- <router-link to="/home">首页</router-link>
        <router-link to="/fenlei">分类</router-link>
        <router-link to='{name:"home",path:"/home",params:{userid:123}}'>购物车</router-link> -->
        <h1>
          <!-- 传参 -->
          <router-link to="/fenlei/888">分类页</router-link>
        </h1>
        <ul>
          <li
            v-for="(item,index) in navlist"
            :key="index"
            @click="change(index)"
          >
            <!-- name跳转传参{name:item.name,params:{fid:888}}   -->
            <!-- name跳转传参{path:item.path,params:{fid:888}}   -->
            <router-link
              :class="item.isSelect?'active':''"
              :to="{name:item.name}"
              >{{item.text}}</router-link
            >
          </li>
        </ul>
      </div>
    </div>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <script>
      // 1 准备组件
      const Home = {
        name: 'home',
        template: `<div>{{msg}}</div>`,
        data() {
          return {
            msg: '我是home组件'
          }
        },
        methods: {}
      }
      // 分类组件
      const Fenlei = {
        name: 'Fenlei',
        template: `<div>
                    <h2>{{msg}}</h2>
                    <h1>传来的参数：{{fid}}</h1>
                  </div>`,
        data() {
          return {
            msg: '我是分类组件',
            fid: ''
          }
        },
        // query传参和params传参的区别
        //query会在？后显示  相当于浏览器get 传参 地址栏中显示
        //params 传参  相当于post传参  地址栏不会显示
        created() {
          // 获取传参 this.$route.params
          // params传参的接
          this.fid = this.$route.params.fid
          // query传参的接受方式
          // this.fid = this.$route.query.fid
        },
        mounted() {},
        methods: {}
      }
      const Cart = {
        name: 'cart',
        template: `<div>{{msg}}</div>`,
        data() {
          return {
            msg: '我是购物车组件'
          }
        },
        methods: {}
      }
      //2创建路由的配置项,路由规则
      var routes = [
        { path: '/home', name: 'home', component: Home }, //route
        { path: '/fenlei/:fid', name: 'fenlei', component: Fenlei },
        // alias “别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。
        { path: '/cart/my', name: 'cart', component: Cart, alias: '/mycart' },
        // 重定向路由的写法
        // { path: '/', redirect: '/home' },
        { path: '/', redirect: { name: 'home' } }
      ]
      //3router 路由器 创建路由对象
      var router = new VueRouter({
        routes
      })
      // 4.把路由挂载到vue的实例
      var vm = new Vue({
        // el:"#app",
        data() {
          return {
            navlist: [
              { path: '/home', name: 'home', text: '首页', isSelect: true },
              {
                path: '/fenlei',
                name: 'fenlei',
                text: '分类',
                isSelect: false
              },
              { path: '/cart', name: 'cart', text: '购物车', isSelect: false }
            ]
          }
        },
        // 挂载路由的配置项 router
        router,
        methods: {
          change(ind) {
            this.navlist.map((item, index) => {
              if (ind == index) {
                return (item.isSelect = true)
              } else {
                return (item.isSelect = false)
              }
            })
          }
        }
      }).$mount('#app')
    </script>
  </body>
</html>
